<template>
	<u-tabbar :value="tabValue" activeColor="#FF4110">

		<u-tabbar-item :text="item.text" v-for="(item, index) of tabList[userType]" @click="clickHandler(item, index)">
			<template #active-icon>
				<image class="u-page__item__slot-icon" :src="item.activeIicon"></image>
			</template>
			<template #inactive-icon>
				<image class="u-page__item__slot-icon" :src="item.inactiveIcon"></image>
			</template>
		</u-tabbar-item>
	</u-tabbar>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		useUserStore
	} from '@/store/index.js';
	import {
		storeToRefs
	} from 'pinia';
	import home from '@/static/tabs/home.png';
	import home_sel from '@/static/tabs/home_sel.png';
	import mine_sel from '@/static/tabs/mine_sel.png';
	import mine from '@/static/tabs/mine.png';
	import preferential from '@/static/tabs/preferential.png';
	import preferential_sel from '@/static/tabs/preferential_sel.png';
	import gas from '@/static/tabs/gas.png';
	import gas_sel from '@/static/tabs/gas_sel.png';
	import merchant from '@/static/tabs/merchant.png';
	import merchant_sel from '@/static/tabs/merchant_sel.png';

	const {
		userInfo
	} = storeToRefs(useUserStore());

	const props = defineProps({
		tabValue: {
			default: 0,
			type: Number
		}
	});

	// 用户类型
	const userType = computed(() => {

		return userInfo.value.type;
		// return 0;
	});
	const tabValue = ref(props.tabValue);
	const tabList = ref([
		[{
				text: '首页',
				activeIicon: home_sel,
				inactiveIcon: home,
				url: '/pages/index/index'
			},
			{
				text: '优惠',
				activeIicon: preferential_sel,
				inactiveIcon: preferential,
				url: '/pages/preferential/preferential'
			},
			{
				text: '我的',
				activeIicon: mine_sel,
				inactiveIcon: mine,
				url: '/pages/mine/mine'
			}
		],
		[{
				text: '商户数据',
				activeIicon: merchant_sel,
				inactiveIcon: merchant,
				url: '/pages/merchant_center/index/index'
			},
			{
				text: '油站管理',
				activeIicon: gas_sel,
				inactiveIcon: gas,
				url: '/pages/merchant_center/gas_station_manage/index'
			},
			{
				text: '优惠劵管理',
				activeIicon: preferential_sel,
				inactiveIcon: preferential,
				url: '/pages/merchant_center/coupon_manage/index'
			}
		]
	]);
	const clickHandler = (item, index) => {
		try {
			if (userType.value == 1) {
				uni.navigateTo({
					url: item.url
				});
			} else {
				uni.switchTab({
					url: item.url
				});
			}
		} catch {
			uni.showModal({
				title: '错误',
				content: '类型出错，请重新登录'
			});
		}
	};
</script>

<style lang="scss">
	.u-page__item__slot-icon {
		width: 40rpx;
		height: 40rpx;
	}
</style>